<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>个人中心</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="css/address.css">
    <link rel="stylesheet" type="text/css" href="css/flower.css">
    <link rel="stylesheet" type="text/css" href="css/flowerYang.css">
    <link rel="stylesheet" type="text/css" href="css/flowerShen.css">
    <link rel="stylesheet" type="text/css" href="css/collect.css">
    <link rel="stylesheet" type="text/css" href="css/order.css">

    <style type="text/css">
        .right-main {
            background: transparent;
            overflow: hidden;
        }
        .order-button .order-btn {
            width: 108px;
            height: 36px;
            border-radius: 20px;
            background: #FF734C;
            margin: 12px auto;
            color: white;
            line-height: 36px;
            text-align: center;
            display: block;
            background: linear-gradient(90deg,#FF734C 0%,#FF3D12 100%);
        }
        .order-delete {
            width: 312px;
            height: 240px;
            margin: 340px auto;
            border: none!important;
            background: white;
            border-radius: 12px;
        }
        #cancelgmrxxModal .m-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            display: block;
            transform: translateX(10px);
        }
        .m-title {
            font-size: 21px;
            color: #232628;
            margin-bottom: 12px;
            text-align: center;
            font-weight: bold;
        }
        .btn-tinge2 {
            width: 108px;
            height: 36px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 20px;
            border: 1px solid #E9ECF0;
        }
        #doHidesubmit {
            background: #FF734C;
            color: white;
            background: linear-gradient(90deg,#FF734C 0%,#FF3D12 100%);
            margin-left: 24px;
        }
        .btn-tinge2 {
            width: 108px;
            height: 36px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 20px;
            border: 1px solid #E9ECF0;
        }
        .modal-dialog {
            margin: 230px auto;
        }
    </style>
</head>
<body class="home">
<%@ include file="GeTop.jsp"%>
<!-- 导航 End -->
<div class="main clearfix">
    <div class="main-container">
        <div class="breadcrumbs">
            <a href="/">首页</a> &gt; <a href="/Member/MemberCenter/">会员中心</a>
            &gt; <a href="/Member/MemberCenter/">会员中心</a>
        </div>
        <div class="wrapper about">
            <div class="pull-left right-main">
                <!--中间部分  -->
                <div class="order-nav clearfix" style="height: 60px;">
                    <div class="nav-item active" value="0">
                        全部订单
                        <span id="zong">${orderNum}</span>
                    </div>
                    <div class="nav-item" value="1">
                        待付款
                        <span>${orderNumDai}</span>
                    </div>
                    <div class="nav-item" value="2">
                        待发货
                        <span>${orderNumJIn}</span>
                    </div>
                    <div class="nav-item" value="3">
                        待收货
                        <span>${orderNumDaiPingJia}</span>
                    </div>
                    <div class="nav-item" value="6">
                        今日配送
                        <span>${orderNumJinRi}</span>
                    </div>
                    <div class="nav-item" value="4">
                        已完成
                        <span>${orderNumYiWanCheng}</span>
                    </div>
                    <div class="nav-item" value="5">
                        已取消
                        <span>${orderNumYiQuXiao}</span>
                    </div>
                </div>
                <div class="order-wrap">
                    <!-- 订单列表 -->
                    <c:if test="${sum==0}">
                        <div class="order-panel">
                            <div class="bd">
                                <img class="order-empty-image" src="https://img02.hua.com/pc/personal_center_new/order-empty.png">
                                <div class="order-empty">暂无订单</div>
                            </div>
                            <div class="digg">
                            </div>
                        </div>
                    </c:if>
                <c:forEach items="${orderList}" var="o">
                    <c:if test="${o.orderstate!=7}">
                        <div class="order-panel">
                            <div class="bd">
                                <div class="order-info">
                                    <div class="order-header">
                                        <input type="hidden" id="deleteOid" value="${o.id}">
                                        <span >下单时间：${o.orderdate}</span>
                                        <span class="orderid">配送时间:${o.servicedate}</span>
                                        <span class="orderid">订单号:${o.id}</span>
                                        <span class="orderid">收货人: ${o.shouname}</span>
                                        <c:if test="${o.orderstate==4||o.orderstate==5}">
                                            <img class="delete" op="hide" src="//img02.hua.com/pc/personal_center_new/order-delete.png" alt="">
                                        </c:if>
                                    </div>
                                    <div class="order-main">
                                        <a href="viewDetails.jsp" class="order-s">
                                            <c:forEach items="${o.orderDetailsList}" var="od">
                                                <img src="image/commodity/${od.commodityDetails.comimage}" alt="">
                                            </c:forEach>
                                        </a>
                                        <c:if test="${o.orderstate==1}">
                                            <div class="order-status" style="color: #B4BABF;">待付款</div>
                                        </c:if>
                                        <c:if test="${o.orderstate==2}">
                                            <div class="order-status" style="color: #B4BABF;">待发货</div>
                                        </c:if>
                                        <c:if test="${o.orderstate==3}">
                                            <div class="order-status" style="color: #B4BABF;">待收货</div>
                                        </c:if>
                                        <c:if test="${o.orderstate==4}">
                                            <div class="order-status" style="color: #B4BABF;">已完成</div>
                                        </c:if>
                                        <c:if test="${o.orderstate==5}">
                                            <div class="order-status" style="color: #B4BABF;">已取消</div>
                                        </c:if>
                                        <c:if test="${o.orderstate==6}">
                                            <div class="order-status" style="color: #B4BABF;">今日配送</div>
                                        </c:if>
                                        <div class="order-money">
                                            <c:forEach items="${o.orderDetailsList}" var="out">
                                                <div class="order-money-num">￥${o.sumPrice}</div>
                                                <div class="order-num">共${o.sumNum}件</div>
                                            </c:forEach>
                                        </div>
                                        <div class="order-button">
                                            <c:if test="${o.orderstate==1}">
                                                <a href="zhuanServlet.shtml?orderId=${o.id}&amp;shifu=${o.sumPrice}" class="order-btn">立即付款</a>
                                            </c:if>
                                            <c:if test="${o.orderstate==3}">
                                                <a href="UpdateStateOrderServlet.shtml?id=${o.id}" class="order-btn">确认收货</a>
                                            </c:if>
                                            <a href="ViewDetailsServlet.shtml?id=${o.id}" class="order-see-detail">查看详情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="digg">
                            </div>
                        </div>
                    </c:if>
              </c:forEach>
                    <!-- 订单列表 End -->
                </div>

                <!--中间到这 -->
            </div>
            <!--隐藏div  -->
            <div class="modal fade com-modal in" id="gmrxxHideModal" aria-hidden="false" style="display: none;">
                <div class="modal-dialog order-delete">
                    <button type="button" style="margin: 8px 10px;" class="close" data-dismiss="modal" aria-label="Close"><span id="guanbi">×</span></button>
                    <div id="cancelgmrxxModal" style="padding-top: 36px">
                        <img class="m-icon" src="https://img02.hua.com/pc/personal_center_new/order-delete-icon.png">
                        <div class="m-title">确定要删除该订单吗？</div>
                        <div class="col-xs-offset-1 col-xs-10" style="padding: 0;margin-left:11.333333%;margin-top: 12px">
                            <input type="hidden" name="op" id="op">
                            <input type="hidden" name="pt" id="pt">
                            <input type="hidden" name="id" id="id">
                            <button type="button" class="btn-tinge2" id="doclose">关闭</button>
                            <button type="button" class="btn-tinge2" id="doHidesubmit">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--隐藏div到这  -->
            <!-- 导流-->
            <div class="customer">
                <div class="customer-service customer-service-open">
                    <div class="customer-service-title">我是您的专属助理</div>
                    <img class="customer-service-img"
                         src="https://img02.hua.com/wxmp/hua/wx-code.png">
                    <div class="customer-service-sub">扫描二维码加我微信</div>
                    <div class="customer-service-hi">Hi~</div>
                    <div class="customer-service-close">
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <%@include file="GeLeft.jsp"%>
        </div>
    </div>
</div>
<!-- 尾部导航 -->
<%@ include file="bottom.jsp"%>

<script type="text/javascript" src="//img02.hua.com/pc/js/common.js"></script>
<script type="text/javascript" src="js/flower.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function (){
        $(".delete").click(function (){
            $("#gmrxxHideModal").show();
            $("#doclose").click(function (){
                $("#gmrxxHideModal").hide();
            });
            $("#doHidesubmit").click(function (){
                let id=$("#deleteOid").val();
                $.ajax({
                    url:"orderDeleteServlet.shtml",
                    type:"get",
                    data:{"id":id},
                    success:function (relust){
                        $("#gmrxxHideModal").hide();
                        if(relust){
                            alert("删除成功！");
                            if($("#deleteOid").val()==id){
                                $("#deleteOid").parent().parent().parent().parent().remove();
                                // location.reload();
                                location.href="user/orderServlet.shtml";
                            }
                        }else {
                            alert("删除失败");
                        }
                    }
                    });
            });
        });
        $("#guanbi").click(function (){
            $("#gmrxxHideModal").hide();
        });
        /*
        获取页面div的值，点击切换样式
         */
        let zts =${zts}
        if(zts!=""&&zts!="0"){
            $("[value='"+zts+"']").addClass("active").siblings().removeClass("active");
        }
        /*
        获取div的属性值，点击改变a标签的链接，并且自动触发
         */
        $(".nav-item").click(function (){
            $(".order-wrap").empty();
            let zhi=$(this).attr("value");
            $("#orderDd").attr("href","user/orderServlet.shtml?zt="+zhi);
            $("#orderDd")[0].click();
        });

    })
</script>

</body>
